<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
</head>
<body>
    <!--参考文档： https://cn.vuejs.org/guide/essentials/template-syntax.html -->

    <script src="./vue.global.prod.js"></script>

    <div id="app">
        <h1 v-bind:id="message">{{ message }}</h1>
        <h1 :id="message">{{ message }}</h1>
        <input type="radio" name="sex" id="" :checked="user.sex"> 男
        <input type="radio" name="sex" id="" :checked="!user.sex">女

        <p>{{ number + 1 }}</p>
        <p>{{ user.sex ? 'YES' : 'NO' }}</p>
        <p>{{ message.split('').reverse().join('') }}</p>

        <div :id="`list-${user.id}`"></div>
    </div>

    <script>
        // 对象解构，从Vue对象中获取createApp函数
        const { createApp,ref,reactive } = Vue

        // 通过createApp函数创建一个app对象
        const app = createApp({

            setup() {
                const message = ref('Hello World!')
                const user = reactive({
                        id:1,
                        name:'张三',
                        sex:true
                    })
                
                const number = ref(1)

                return {
                    message,
                    user,
                    number
                }
            },
        })

        // app对象挂载到id="app"的HTML元素，关联起来
        app.mount('#app')

    </script>

</body>
</html>